<script setup>
import {ref, provide, onBeforeMount, watchEffect} from 'vue'
import {delAllowMailAPI} from "@/api/manager.js";
import {getManagerRole, ROOT} from "@/constants/ManagerRole.js";
import {delLiuById, getLiuPageAPI} from "@/api/liu.js";
import {getDateTimeFormatNow} from "@/utils/DateUtils.js";

// 匹配条件
const kw = ref(null)
watchEffect(() => {
  if (kw.value === '') kw.value = null
})

// 分页数据
const current = ref(1)
const pageSize = ref(10)
const pageCnt = ref(0)
const size = ref(0)
const data = ref([])
const getLiuPage = async (current_, pageSize_, kw_ = null) => {
  const res = await getLiuPageAPI(current_, pageSize_, null, kw_)
  if (res === null) return
  current.value = res.current
  pageSize.value = res.pageSize
  pageCnt.value = res.pageCnt
  size.value = res.size
  data.value = res.data
}

// 初始查询
onBeforeMount(async () => {
  await getLiuPage(current.value, pageSize.value)
})

// 条件查询
const searchByCondition = async () => {
  await getLiuPage(current.value, pageSize.value, kw.value)
}

// 分页每页数据大小改变
const handlePageSizeChange = async (val) => {
  pageSize.value = val
  await searchByCondition()
}
// 当前页发生变化
const handleCurrentChange = async (val) => {
  current.value = val
  await searchByCondition()
}

// 删除
const delAllowMail = async (idx) => {
  const liu = data.value[idx]
  const res = await ElMessageBox.confirm(
      `是否确认删除留言`,
      '留言删除',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 执行权限删除
    return await delLiuById(liu.id)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) await searchByCondition()
}
</script>

<template>
  <div class="allow-mails w-full min-w-max flex justify-center items-start">
    <div class="glass-container p-8">
      <div class="flex justify-between items-center">
        <div class="flex-1 flex justify-start items-center">
          <div>
            <el-input class="ipt" v-model="kw" clearable :maxlength="255"
                      show-word-limit placeholder="请输入搜索关键词"/>
          </div>
          <el-button type="primary" plain @click="searchByCondition">搜索</el-button>
        </div>
      </div>
      <el-table class="mt-4" style="width: 100%" :data="data" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="userId" label="用户编号" width="80"/>
        <el-table-column prop="username" label="用户名" width="150"/>
        <el-table-column label="用户头像" width="150">
          <template #default="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.avatar"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[scope.row.avatar]"
                :initial-index="0"
                hide-on-click-modal
                close-on-press-escape
                preview-teleported
                fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column prop="content" label="留言内容" width="255"></el-table-column>
        <el-table-column label="留言图片" width="150">
          <template #default="scope">
            <el-image
                v-if="scope.row.imgs.length > 0"
                style="width: 100px; height: 100px"
                :src="scope.row.imgs[0].imgUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[...(scope.row.imgs.map(i => i.imgUrl))]"
                :initial-index="0"
                hide-on-click-modal
                close-on-press-escape
                preview-teleported
                fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="留言时间" width="180">
          <template #default="scope">
            {{ getDateTimeFormatNow(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button :disabled="scope.row.role === ROOT" type="danger" plain size="small" @click="delAllowMail(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 flex justify-end items-center">
        <el-pagination
            v-model:current-page="current"
            v-model:page-size="pageSize"
            :page-sizes="[1, 10, 20, 30, 40]"
            :total="pageCnt"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss">

</style>